<template>
    <fieldset>
        <legend>详情页</legend>
        <h1>{{current.title}}</h1>
        <img height="100" :src="current.pic" alt="">
        <h3>{{current.description}}</h3>
    </fieldset>
</template>
<script>

    let data = [
        {
            id: 1,
            title: "香蕉",
            pic: "https://bkimg.cdn.bcebos.com/pic/d01373f082025aafa40fb76920bfbc64034f78f0ac4c?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U5Mg==,g_7,xp_5,yp_5/format,f_auto",
            description: "香蕉（学名：Musa nana Lour.）是芭蕉科、芭蕉属植物。植株丛生，具匐匍茎，矮型的高3.5米以下，一般高不及2米，高型的高4-5米，假茎均浓绿而带黑斑，被白粉，尤以上部为多。叶片长圆形，长（1.5）2-2.2（2.5）米，宽60-70（85）厘米。穗状花序下垂，花序轴密被褐色绒毛，苞片外面紫红色，被白粉，内面深红色。花乳白色或略带浅紫色，离生花被片近圆形。果序弯垂，结果10-20串，约50-150个。植株结果后枯死，由根状茎长出的吸根继续繁殖，每一根株可活多年。 [1] "
        },
        {
            id: 2,
            title: "黄瓜🥒",
            pic: "https://bkimg.cdn.bcebos.com/pic/77094b36acaf2eddff326d3e871001e938019321?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5/format,f_auto",
            description: "黄瓜（学名：Cucumis sativus L.）葫芦科一年生蔓生或攀援草本植物。茎、枝伸长，有棱沟，被白色的糙硬毛。卷须细。叶柄稍粗糙，有糙硬毛；叶片宽卵状心形，膜质，裂片三角形，有齿。雌雄同株。雄花：常数朵在叶腋簇生；花梗纤细，被微柔毛；花冠黄白色，花冠裂片长圆状披针形。雌花：单生或稀簇生；花梗粗壮，被柔毛；子房粗糙。果实长圆形或圆柱形，熟时黄绿色，表面粗糙。种子小，狭卵形，白色，无边缘，两端近急尖。花果期夏季。"
        },
        {
            id: 3,
            title: "胡萝卜🥕",
            pic: "https://bkimg.cdn.bcebos.com/pic/d043ad4bd11373f082022973c6455cfbfbedaa64ae8f?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxNTA=,g_7,xp_5,yp_5/format,f_auto",
            description: "胡萝卜（学名：Daucus carota var. sativa Hoffm.）是伞形科、胡萝卜属野胡萝卜的变种，一年生或二年生草本植物。根粗壮，长圆锥形，呈橙红色或黄色。茎直立，高可达90厘米，多分枝。叶片具长柄，羽状复叶，裂片线形或披针形，先端尖锐；叶柄基部扩大，形成叶鞘。复伞形花序；花序梗有糙硬毛；总苞片多数，呈叶状、结果期外缘的伞辐向内弯曲；花通常白色，有时带淡红色；花柄不等长。果实圆锥形，棱上有白色刺手。期4月开花。"
        }
    ]

    export default {
        data() {
            return {
                details: data,
                current: {}
            }
        },
        props:['id'],
        mounted() {
            //$router $route 区别?

            //$route是vue实例出来的最大的路由对象,$router和$route是包含关系,$router包含了$route

            //$route是当前页面的路由对象

            console.log(this.$router)
            console.log(this.$route)

            //获取动态传递过来的id
            // let id = this.$route.params.id;

            let id = this.id;

            //给当前的数据赋值
            this.current = this.details.find(item => item.id == id)

            console.log(this.current)
        }
    }
</script>